this Keyword

this is a special keyword that refers to the object that is currently executing the code.

Its value depends on how and where the function is called (not where it is defined).

The value of this determined during execution.

Global Context

• this always (both strict and non-strict mode) refer to global execution context(window for browser and global for nodejs) without depending on strct or non-strict mode.

  console.log(this); // Output: Window [postMessage:...]

Inside a Function

• In non-strict mode, this refers to the global object.

• In strict mode, this is undefined.

  function fun1() {
    console.log(this); // Output: Window [postMessage:...]
  }
  function fun2() {
    "use strict";
    console.log(this); // Output: undefined
  }

• This happen because strict mode is used to ignore bad practices. There are things which can stay out of javascript rules, we can create accidental global variable, which is not possible in strict mode. Which is why non-strict mode refer global object and strict mode refer undefined.

  function unnamed() {
    this.name = "Masum Billah";
  }

  • it will assign a new variable to gloabl object, which you can access any where. But it will not work in strict mode.

Object Rules

• If we define custom object, then this will refer leading parent(close parent) instead of refering global object.
• In a class, this refers to the instance of the class.

Arrow Functions

• Arrow functions do not have their own this.
• They inherit this from their surrounding lexical scope.

const person = {
  name: "Rajib",
  normalFunc: function () {
    console.log(this.name);
  },
  arrowFunc: () => {
    console.log(this.name);
  },
};

person.normalFunc(); // "Rajib" → `this` = person object
person.arrowFunc(); // undefined → `this` from global scope

Use arrow functions when you want to keep this the same as the outer scope.

const student = {
  name: "Rajib",
  normalFunc: function () {
    console.log(this.name);
  },
  arrowFunc: () => {
    console.log(this.name);
  },
};

person.normalFunc(); // "Rajib" → `this` = person object
person.arrowFunc(); // undefined → `this` from global scope

Use arrow functions when you want to keep this the same as the outer scope.

const student = {
  name: "Masum",
  marks: [85, 90, 95],
  showMarks() {
    this.marks.forEach(function (mark) {
      console.log(this.name + " scored " + mark);
    });
  },
};

student.showMarks();
// ❌ Error: `this.name` is undefined inside normal function

// ✅ Fix with arrow function
student.showMarks = function () {
  this.marks.forEach((mark) => {
    console.log(this.name + " scored " + mark);
  });
};

student.showMarks();
// Output:
// Masum scored 85
// Masum scored 90
// Masum scored 95

Here, the arrow function inherits this from showMarks() method, which points to student.

Explicit Binding

We can manually set this using:

• call() → immediately invokes function with given this and arguments
• apply() → same as call, but arguments as an array
• bind() → returns a new function with fixed this

function introduce(city, country) {
  console.log(`${this.name} from ${city}, ${country}`);
}

const user = { name: "Masum" };

introduce.call(user, "Dhaka", "Bangladesh"); // Masum from Dhaka, Bangladesh
introduce.apply(user, ["Chittagong", "Bangladesh"]); // Masum from Chittagong, Bangladesh

const boundFunc = introduce.bind(user, "Jessore", "Bangladesh");
boundFunc(); // Masum from Jessore, Bangladesh